leaflet在线地图进阶宝典——高级交互特性
本文针对leaflet的高级交互特性进行展开，主要涉及到leaflet中等值线地图的鼠标悬浮效果及点击效果的动态呈现。这也是leaflet的天然HTML属性所具有的强大优势。
在制作高质量在线数据地图的项目中，leaflet结合扩展的HTML性能，可以呈现非常人性化的动态效果，如能结合css、shiny等装饰器和交互框架，几乎可以胜任常见的动态交互网站的制作。
library("sp")
library("leaflet")
options(stringsAsFactors = FALSE,check.names = FALSE)
锁定目录：
setwd("D:/R/mapdata/State")
导入美国地图素材（含数据）
states<-geojsonio::geojson_read("us-states.geojson", what = "sp")
一个简单的开始：（引用mapbox地图）
m <- leaflet(states) %>%
setView(-96, 37.8, 4) %>% #设置呈现的视觉中心
addProviderTiles("MapBox", options = providerTileOptions(
id = "mapbox.light", #添加地图图层
accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN')))
m %>% addPolygons() #地图呈现
#分箱及设置色盘：
bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf)
pal <- colorBin("YlOrRd", domain = states$density, bins = bins)
m %>% addPolygons(
fillColor = ~pal(density), #显式声明颜色映射变量
weight = 2, #线宽
opacity = 1, #透明度
color = "white", #颜色
dashArray = "3",
fillOpacity = 0.7) #填充透明度
m %>% addPolygons(
fillColor = ~pal(density),
weight = 2,
opacity = 1,
color = "white",
dashArray = "3",
fillOpacity = 0.7,
highlight = highlightOptions( #设置高亮属性
weight = 5,
color = "#666",
dashArray = "",
fillOpacity = 0.7,
bringToFront = TRUE))
https://v.qq.com/txp/iframe/player.html?vid=b1319tj0tpz&width=500&height=375&auto=0
#设置鼠标点击事件：
labels <- sprintf("<strong>%s</strong><br/>%g people / mi<sup>2</sup>",states$name,states$density) %>% lapply(htmltools::HTML) #转化为HTML格式标签
m <-m %>% addPolygons(
fillColor = ~pal(density),
weight = 2,
opacity = 1,
color = "white",
dashArray = "3",
fillOpacity = 0.7,
highlight = highlightOptions(
weight = 5,
color = "#666",
dashArray = "",
fillOpacity = 0.7,
bringToFront = TRUE
),
label = labels,
labelOptions = labelOptions( #标签选项设置（参数类别HTML属性）
style=list("font-weight"="normal",padding="3px 8px"),
textsize="15px",
direction="auto")
);m
https://v.qq.com/txp/iframe/player.html?vid=j1319fdbzgk&width=500&height=375&auto=0
#增加图例：
m %>% addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL,
position = "bottomright")
以下是该案例的完整代码：
# From http://leafletjs.com/examples/choropleth/us-states.js
（数据源，js格式记得保存为geojson格式）
bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf)
pal <- colorBin("YlOrRd", domain = states$density, bins = bins)
labels <- sprintf(
"<strong>%s</strong><br/>%g people / mi<sup>2</sup>",
states$name, states$density
) %>% lapply(htmltools::HTML)
leaflet(states) %>%
setView(-96, 37.8, 4) %>%
addProviderTiles("MapBox", options = providerTileOptions(
id = "mapbox.light",
accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN'))) %>%
addPolygons(
fillColor = ~pal(density),
weight = 2,
opacity = 1,
color = "white",
dashArray = "3",
fillOpacity = 0.7,
highlight = highlightOptions(
weight = 5,
color = "#666",
dashArray = "",
fillOpacity = 0.7,
bringToFront = TRUE),
label = labels,
labelOptions = labelOptions(
style = list("font-weight" = "normal", padding = "3px 8px"),
textsize = "15px",
direction = "auto")) %>%
addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL,
position = "bottomright")
欢迎关注魔方学院QQ群